<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>多车辆实时定位</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css">
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        /*!* 信息标记 *!*/
        /*.custom-content-marker {*/
        /*    position: relative;*/
        /*}*/

        /*.custom-content-marker img {*/
        /*    width: 48px;*/
        /*    height: 24px;*/
        /*}*/

        /*.custom-content-marker .markerInfo {*/
        /*    position: absolute;*/
        /*    top: 13px;*/
        /*    right: -190px;*/

        /*    background: rgba(255, 255, 255, 0.7);*/
        /*    padding: 2px 5px;*/
        /*    border: 1px solid #ccc;*/
        /*    white-space: nowrap;*/
        /*}*/
        #searchPanel {
            position: absolute;
            top: 30px;
            right: 10px;
            z-index: 1000;
            background: #fff;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            display: flex;
            align-items: center; /* 垂直居中对齐 */
        }

        .search-inputs {
            display: flex;
            flex-direction: column; /* 使子元素垂直排列 */
            margin-right: 10px; /* 在输入框和按钮之间添加一些间距 */
        }

        #searchSelect {
            height: 30px;
            width: 200px;
            margin-top: 10px;
        }

        #searchButton {
            height: 30px; /* 调整按钮高度以匹配输入框和选择框的总高度 */
        }

    </style>
</head>
<body>
<div id="container"></div>
<div id="searchPanel">
    <div class="search-inputs">
        <select id="searchSelect">
            <option value="">选择项目部</option>
            @for(item in basicOperatelist!){
            <option value="${item.operateId}">${item.operateName}</option>
            @}
        </select>
    </div>
    <button id="searchButton" type="button" class="layui-btn layui-bg-purple">搜索位置</button>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=4fbb5ae31246fb4337678f7649c87b1b"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>

    /* methods方法 */



    /* 地图方法 */
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 6,
        center: [117.222439,36.669593] // 初始中心点
    });

    // 车辆数据模型
    var vehicles = [
        { id: 'vehicle1', position: [117.352463, 39.190736], status: 'active', info: "HX1-DD-20240904-3903" },
        { id: 'vehicle2', position: [117.436602, 39.141738], status: 'active', info: "HX2-DD-20240905-3904" },
        { id: 'vehicle3', position: [117.402463, 39.200736], status: 'active', info: "HX3-DD-20240904-3903" },
        { id: 'vehicle4', position: [117.506602, 39.121738], status: 'active', info: "HX4-DD-20240905-3904" }
    ];

    // 创建车辆标记和信息窗体
    function createVehicleMarker(vehicle) {
        var markerContent = `
                <div class="custom-content-marker">
                    <div class="markerInfo">
                        <strong> 实时位置 </strong><br/>
                        货运订单号: <span style="color: red;">${vehicle.info}</span><br/>
                        车牌: <span style="color: red;">${vehicle.id}</span><br/>
                    </div>
                </div>`;

        // 定义图标的URL
        var iconUrl = "https://s21.ax1x.com/2024/10/14/pAtZjc4.png";

        // 创建一个新的Icon对象，并设置图标的尺寸
        var icon = new AMap.Icon({
            size: new AMap.Size(38, 42),
            image: iconUrl,
            imageSize: new AMap.Size(38, 42)
        });

        // 创建Marker，并使用自定义的Icon
        var marker = new AMap.Marker({
            position: vehicle.position,
            map: map,
            title: vehicle.id,
            icon: icon,
            offset: new AMap.Pixel(-22, -26),
            autoRotation: true
        });

        // 创建信息窗体
        vehicle.infoWindow = new AMap.InfoWindow({
            content: markerContent,
            offset: new AMap.Pixel(0, -28)
        });

        // 点击标记时打开信息窗体
        marker.on('click', function() {
            if (markerContent) {
                vehicle.infoWindow.open(map, marker.getPosition());
            }
        });

        return marker;
    }

    // 初始化所有车辆
    vehicles.forEach(function(vehicle) {
        vehicle.marker = createVehicleMarker(vehicle);
    });

    // 更新车辆位置
    function updateVehiclePosition(vehicle, newPosition) {
        vehicle.position = newPosition;
        vehicle.marker.setPosition(newPosition);
    }

    // 模拟请求车辆位置更新
    // function requestVehiclePositions() {
    //     // 模拟数据更新
    //     vehicles.forEach(function(vehicle, index) {
    //         vehicle.position = [
    //             vehicle.position[0] + Math.random() * 0.01 - 0.005,
    //             vehicle.position[1] + Math.random() * 0.01 - 0.005
    //         ];
    //         updateVehiclePosition(vehicle, vehicle.position);
    //     });
    // }
    //
    // // 定时更新车辆位置
    // setInterval(requestVehiclePositions, 10000); // 每10秒更新一次位置

    map.setFitView(null, false, [150, 60, 100, 60]);
</script>
</body>
</html>